<template>
<div>
  <el-row>
    <el-col :span="2" style="line-height: 40px">选择车辆:</el-col>
    <el-col :span="4">
      <el-select v-model="form.truckId" placeholder="请选择" @change="changeTruck">
        <el-option
        v-for="truck of trucks" 
        :key="truck.truckId"
        :label="truck.truckNumber +'  →  '+ truck.endSite" 
        :value="truck.truckId"></el-option>
      </el-select>
    </el-col>
    <el-col :span="4" style="line-height: 40px" :offset="13">
      <el-button type="primary" @click="truckAwait">返回待命</el-button>
      <el-button type="primary" icon="el-icon-truck" @click="depart">发车</el-button>
    </el-col>
  </el-row>
  <el-transfer
    filterable
    filter-placeholder="请输入单号"
    v-model="form.documents"
    :data="doucements"
    :titles="['仓库运单', '装车运单']">
  </el-transfer>
</div>
</template>

<script>
import {getTruck,updTruck,truckDepart} from 'network/truck.js'

let loginAccount = JSON.parse(sessionStorage.loginAccount)

export default {
  data() {
    return {
      trucks: [], //待命车辆
      doucements: [], //待装车运单
      form: {
        truckId: null,  //车辆Id
        truckState: '配送中', //车辆状态
        empId: 0,
        nowSite: loginAccount.sitetb.siteName,  //当前站点
        endSite: loginAccount.sitetb.siteName, //目标站点
        documents: [],  //被托运货物单号列表
      }
    }
  },
  methods: {
    //车辆返回待命
    truckAwait() {
      if(this.form.truckId == null || this.form.truckId == '') {
        this.$message({
          showClose: true,
          message: '请先选择车辆',
          type: 'error'
        });
        return false
      }
      this.$confirm('不需要该车辆?', '确定将返回站点待命状态', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doucements.splice(0)
        updTruck({truckId:this.form.truckId,empId:this.form.empId,truckState:"待命",endSite:"0"}).then(res => {
          if(res>0) {
            this.$message({
              type: 'success',
              message: '返回成功!'
            });
            getTruck({nowSite:loginAccount.sitetb.siteName,truckState:"待装车"}).then(res => {
              this.trucks = res
            })
          }
        })
        this.form = this.$options.data().form
      })
    },
    changeTruck(value) {
      let truck
      for(let t of this.trucks) {
        if(value == t.truckId) {
          truck = t
        }
      }
      this.form.empId = truck.empId
      this.doucements.splice(0)
      for(let d of this.$store.state.modules.allSiteDocument.documents) {
        if(d.docEnd == truck.endSite && d.state == "待配送") {
          let name = "("
          let pack = "("
          let num = 0
          for(let c of d.cargos) {
            name += c.cargoName+","
            pack += c.cargoPack+","
            num += c.num*1
          }
          this.doucements.push({key:d.docId,label:d.docId+'→'+name+")→"+pack+")→"+"数量:"+num+"→状态:"+d.state})
        }
      }
    },
    //发车
    depart() {
      if(this.form.truckId == null || this.form.truckId == '') {
        this.$message({
          showClose: true,
          message: '请先选择车辆',
          type: 'error'
        });
        return false
      }
      if(this.form.documents.length<1) {
        this.$message({
          showClose: true,
          message: '未添加货物',
          type: 'error'
        });
        return false
      }
      this.$confirm('确认发车?', '请仔细检查货物列表', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        truckDepart(this.form).then(res => {
          if(res > 0) {
            this.$message({
              type: 'success',
              message: '发车成功!'
            });
          }
          this.trucks.splice(0)
          getTruck({nowSite:loginAccount.sitetb.siteName,truckState:"待装车"}).then(res => {
            for(let truck of res) {
              if(truck.endSite == loginAccount.sitetb.siteName) {
                this.trucks.push(truck)
              }
            }
          })
          //更新当前网点的所有运单列表存在vuex里
          this.$store.dispatch('setDocument',loginAccount.sitetb.siteName)
        })
        this.form = this.$options.data().form
        this.doucements.splice(0)
      })
    }
  },
  mounted() {
    getTruck({nowSite:loginAccount.sitetb.siteName,truckState:"待装车"}).then(res => {
      for(let truck of res) {
        if(truck.endSite == loginAccount.sitetb.siteName) {
          this.trucks.push(truck)
        }
      }
    })
  }
}
</script>

<style>
.height40{
  line-height:40px
}
.el-row{
  margin-bottom: 50px;
}
.el-transfer-panel{
  width: 42%;
  
}
.el-transfer-panel__body{
  height:400px;
}
.el-transfer-panel__list.is-filterable{
  height:400px;
}
</style>
